<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div>
                            <form class="form-inline" onsubmit="return false;">
                                <div class="form-group">
                                    <input class="form-control" type="text" id="example-if-email"
                                           name="example-if-email" placeholder="请输入标准的企易秀链接" v-model="url">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success" type="button" v-on:click="draw">提取H5</button>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="example-if-password">请文章标题</label>
                                    <input class="form-control" type="text" id="example-if-password"
                                           name="example-if-password" placeholder="请文章标题" v-model="keyword">
                                </div>
                                <div class="form-group">
                                    <el-select v-model="status" placeholder="全部">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success" type="submit" v-on:click="searchClick()">筛选</button>
                                </div>
                            </form>
                        </div>

                        <div class="table-responsive" style="width: 100%;margin-top: 20px;" v-loading="loading">

                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    @sort-change='sortChange'
                                    :default-sort="{prop: '_id', order: 'descending'}"
                            >
                                <el-table-column
                                        label="ID"
                                        type="index"
                                        :index="indexMethod"
                                        align="center"
                                        width="35">
                                </el-table-column>
                                <el-table-column
                                        prop="title"
                                        label="文章标题"
                                        align="center"
                                        width="140">
                                    <template slot-scope="scope">
                                        <a :href="'/admin/article/'+scope.row._id+'/edit'" target="_blank" style="cursor:pointer;">{{scope.row.title}}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="companyStr"
                                        label="所属公司"
                                        align="center"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="categoryStr"
                                        label="所属分类"
                                        align="center"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="userName"
                                        label="上传用户"
                                        align="center"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="fromAccount"
                                        label="来源公众号"
                                        align="center"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="status"
                                        label="状态"
                                        align="center"
                                        :formatter="formatStatus"
                                        width="45">
                                </el-table-column>
                                <el-table-column
                                        prop="wxView"
                                        label="浏览"
                                        align="center"
                                        sortable
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="shareNum"
                                        label="分享"
                                        align="center"
                                        sortable
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="created_at"
                                        label="上传时间"
                                        align="center"
                                        sortable
                                        width="146">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                        width="220">
                                    <template slot-scope="scope">
                                        <span class="span-danger"  @click="handleEdit(scope.row,1)">单条推送</span>

                                        <span class="span-success"  @click="handleEdit(scope.row,0)">设置</span>

                                        <span class="span-success" @click="handleStatus(scope.row._id,0)"
                                              v-if="scope.row.status===1">隐藏
                                        </span>
                                        <span class="span-success" @click="handleStatus(scope.row._id,1)"
                                              v-if="scope.row.status===0">显示
                                        </span>
                                        <span class="span-danger" @click="handleDelete(scope.row)">删除</span>

                                        <a v-if="scope.row.originalUrl" :href="scope.row.originalUrl" target="_bland">原文</a>

                                    </template>

                                </el-table-column>
                            </el-table>
                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        @size-change="handleSizeChange"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>
                            <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                                <el-form :model="form">

                                    <el-form-item label="" :label-width="formLabelWidth">
                                        <h5>{{articleTitle}}</h5>
                                    </el-form-item>


                                    <el-form-item label="关联分类" :label-width="formLabelWidth">
                                        <el-autocomplete
                                                v-model="form.categoryName"
                                                :fetch-suggestions="querySearchAsync"
                                                placeholder="请输入内容"
                                                @select="handleQuerySelect"
                                                style="width: 100%"
                                        ></el-autocomplete>
                                        <el-tag
                                                :key="tag.id"
                                                v-for="tag in categoryTags"
                                                closable
                                                :disable-transitions="false"
                                                @close="handleIndustryClose(tag)">
                                            {{tag.value}}
                                        </el-tag>
                                    </el-form-item>

                                    <el-form-item label="关联公司" :label-width="formLabelWidth">
                                        <el-autocomplete
                                                v-model="form.companyName"
                                                :fetch-suggestions="queryCompanyAsync"
                                                placeholder="请输入内容"
                                                @select="handleCompanySelect"
                                                style="width: 100%"
                                        ></el-autocomplete>
                                        <el-tag
                                                :key="tag.id"
                                                v-for="tag in companyTags"
                                                closable
                                                :disable-transitions="false"
                                                @close="handleCompanyClose(tag)">
                                            {{tag.value}}
                                        </el-tag>
                                    </el-form-item>

                                    <el-form-item label="配文" :label-width="formLabelWidth" v-if="setTime">
                                        <el-input
                                                type="textarea"
                                                placeholder="请输入配文"
                                                v-model="form.body"
                                                :rows="4"
                                                maxlength="2000"
                                                show-word-limit
                                                style="width:80%;"
                                        >
                                        </el-input>
                                    </el-form-item>

                                    <el-form-item label="推送时间" :label-width="formLabelWidth" v-if="setTime">
                                        <el-select v-model="form.time">
                                            <el-option
                                                    v-for="item in timeOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                            >
                                            </el-option>
                                        </el-select>
                                        <el-button type="success" @click="submitPreview">预览</el-button>
                                    </el-form-item>

                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="submitSet">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import common from '../../api/public.js';
    export default {
        name: "CartoonComponent",
        data() {
            return {
                status:-1,
                options: [{
                    value: -1,
                    label: '全部'
                }, {
                    value: 1,
                    label: '显示'
                }, {
                    value: 0,
                    label: '隐藏'
                }],
                pageActive: false,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: false,
                keyword:'',
                formLabelWidth: '122px',
                form: {
                    name: '',
                    categoryName: '',
                    companyName: '',
                    time:0,
                    body:''
                },
                categoryTags: [],
                categoryIds: [],
                companyTags: [],
                companyIds: [],
                companies: [],
                restaurants: [],
                dialogFormVisible: false,
                timeOptions:[
                    {'label':'立即推送', 'value':0},
                    {'label':'晚15分钟', 'value':900},
                    {'label':'晚30分钟', 'value':1200}
                ],
                setTime:0,
                dialogFormTitle:'动画设置'
            }
        },
        methods: {
            ...common,
            search: function () {
                let self = this;
                let uri = 'article/video/cartoon/post-list';
                self.loading = true;
                let postData = {
                    type:3,
                    startTime: self.startTime,
                    endTime: self.endTime,
                    keyword: self.keyword,
                    page: self.currentPage,
                    limit: self.pageSize,
                    status: self.status,
                    order: self.order,
                    orderField: self.orderField,
                    verifyStatus: 1,
                };
                axios.post(uri, postData).then(function (result) {
                    self.total = result.data.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.data.data;
                    console.log(self.list);
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleStatus: function (id, status) {
                let self = this;
                let uri = "article/video/cartoon/set-status/" + id + "/" + status;
                axios.get(uri).then(function (result) {
                    self.search();
                });
            },
            handleImgUrlSuccess: function (response) {
                let self = this;
                if (response.code === 200) {
                    self.form.imageUrl = response.url
                }
            },
            beforeAvatarUpload: function (item) {
                console.log(item)
            },
            createCartoon:function () {
                this.dialogFormVisible = true;
                this.form.title = '';
            },
            handleEdit(item, setTime = 0) {
                this.dialogFormVisible = true;
                //this.categoryTags = item.categoryNames;
                this.form.categoryName = '';
                this.form.companyName = '';
                this.companyIds = [];
                this.companyTags = [];
                this.categoryIds = [];
                this.categoryTags = [];
                this.articleTitle = item.title;
                this.setTime = setTime;

                if (setTime === 0) {
                    this.dialogFormTitle = '文章设置';
                } else {
                    this.dialogFormTitle = '文章单条推送';
                    this.form.body = item.describe;
                }

                let data = item;
                this.categoryTags = data.categoryNames;

                data.categoryNames.forEach((item) => {
                    this.categoryIds.push(item.id)
                });
                this.companyTags = data.companies;
                data.companies.forEach((item) => {
                    this.companyIds.push(item.id)
                });
                this.id = item._id;
            },
            submitSet() {
                let self = this;
                let categoryIds = this.categoryIds;
                let companyIds = this.companyIds;
                /*if (categoryIds.length > 0 && companyIds.length) {
                    self.$message.error('不能同时选择分类和公司！');
                    return;
                }*/
                self.loading = true;

                var uri = '';
                let data = {companyIds: companyIds, categoryIds: categoryIds};
                if (this.setTime === 1) {
                    data.time = this.form.time;
                    data.body = this.form.body;
                    uri = "article/video/cartoon/time-send/" + self.id;
                } else {
                    uri = "article/set/" + self.id;
                }
                self.dialogFormVisible = false;
                axios.put(uri, data).then(function (result) {
                    self.search();
                });
            },
            draw() {
                let self = this;
                let uri = "cartoon/draw";
                let videoUrl = this.url;
                if (!videoUrl) {
                    self.$message.error('提取链接不能为空！');
                    return;
                }
                let postData = {url: videoUrl};
                self.loading = true;
                axios.post(uri,postData).then(function (result) {
                    self.url = "";
                    self.search();
                },function (error) {
                    self.loading = false;
                });
            },
            handleDelete: function (row) {
                let self = this;
                let tipStr = "此操作将永久删除“" + row.title + "”, 是否继续?";
                self.$confirm(tipStr, '动画删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.deleteRequireArticleVideoCartoon(row._id)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
        mounted() {
            this.queryIndustry();
            this.queryCompany();
            this.search();
        }
    }
</script>

<style scoped>
    .masonry-grid.gap-2 .masonry-item{
        position: relative;
    }
    .masonry-item .masonry-item-btn{
        position: absolute;
        top: 2px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-upload__input {
        display: none;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }

    .masonry-grid.gap-2 .masonry-item img{
        width: 100%;
        height: 225px;
        object-fit: cover;
    }
</style>
